<template>
	<div class="swiper-container ad">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="ad in ad_list">
				<a>
					<div class="swiper-img" v-bind:style="{backgroundImage: 'url(' + oss_url + (ad.thumb) + ')'}">
						
					</div>
					<!--<img class="swiper-img" :src="oss_url + (ad.thumb)" />-->
				</a>
			</div>
			<!--<div class="swiper-slide">
				<a>
					<img class="swiper-img" src="../../assets/home-img.png" />
				</a>
			</div>-->
		</div>
		<div class="swiper-button-prev swiper-button-white swiper-ang"></div>
		<div class="swiper-button-next swiper-button-white swiper-ang"></div>
		<div class="swiper-pagination"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ad_list: []
			}
		},
		mounted() {
			this.getAd();

		},
		methods: {
			//广告列表
			getAd() {
				var self = this;
				var data = {};
				$.post(global.domain + global.API.ad_list, data, function(msg) {
					//self.isloading = false;
//					self.$emit('hideLoad',false); //主动触发upup方法，'hehe'为向父组件传递的数据
					if(msg.error == 0) {
						self.ad_list = msg.data;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						self.$nextTick(function() {
							var swiper = new Swiper('.ad', {
								pagination: '.swiper-pagination',
								prevButton: '.swiper-button-prev',
								nextButton: '.swiper-button-next',
								slidesPerView: 'auto',
								centeredSlides: true,
								paginationClickable: true,
								loop: true,
								autoplay: 3000
							});
						});
					} else {
						console.log(msg.error);
					}
				}, 'json');
			}
		}
	}
</script>

<style scoped>
	@import "../../style/homeSlide.css";
</style>